<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    <canvas id="canvas"></canvas>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(113.678121,22.64869), 9);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {
                        "lightness": 61,
                        "saturation": -100
                    }
                }
            ]
        });

        $.get('data/geojson/guang_dong.geo.json', function(geojson) {

            var options = {
                gradient: {
                    0: 'yellow',
                    1: 'red'
                },
                globalAlpha: 0.8,
                draw: 'intensity'
            }

            var dataSet = mapv.geojson.getDataSet(geojson);
            var citys = {
                '深圳市': 20,
                '广州市': 40,
                '佛山市': 60,
                '江门市': 80,
                '中山市': 100,
            }
            var data = dataSet.get({
                filter: function (item) {
                    if (!citys[item.name]) {
                        return false;
                    }

                    item.count = citys[item.name];
                    return true;
                }
            });
            dataSet = new mapv.DataSet(data);

            var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

            var textOptions = {
                draw: 'text',
                font: '14px Arial',
                fillStyle: 'blue',
                shadowColor: 'white',
                shadowBlue: 20,
                zIndex: 11,
                shadowBlur: 10
            }

            var data = [];

            for (var key in citys) {
                var center = mapv.utilCityCenter.getCenterByCityName(key.replace('市', ''));
                data.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [center.lng, center.lat]
                        },
                        text: key
                    }
                );
            }
            var dataSet = new mapv.DataSet(data);

            var mapvLayer = new mapv.baiduMapLayer(map, dataSet, textOptions);

        });


        

    </script>
	
</body>
</html>
